<template>
    <div class="freight-template-container">
        <div class="operation-bar">
            <el-button type="primary" @click="handleAdd">新增运费模板</el-button>
        </div>

        <el-table :data="freightTemplates" border style="width: 100%">
            <el-table-column prop="name" label="快递名称" width="200"></el-table-column>
            <el-table-column prop="firstWeight" label="首重(kg)" width="200"></el-table-column>
            <el-table-column prop="firstPrice" label="首重价格(元)" width="200"></el-table-column>
            <el-table-column prop="additionalWeight" label="续重(kg)" width="200"></el-table-column>
            <el-table-column prop="additionalPrice" label="续重价格(元)" width="200"></el-table-column>
            <el-table-column prop="expressApi" label="快递API ID" width="200"></el-table-column>
            <el-table-column prop="positionApi" label="定位查询接口" width="200"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增/编辑运费模板弹窗 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="模板名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="首重(kg)" prop="firstWeight">
                    <el-input-number v-model="form.firstWeight" :min="0.1" :precision="1" :step="0.1"></el-input-number>
                </el-form-item>
                <el-form-item label="首重价格(元)" prop="firstPrice">
                    <el-input-number v-model="form.firstPrice" :min="0" :precision="2" :step="0.1"></el-input-number>
                </el-form-item>
                <el-form-item label="续重(kg)" prop="additionalWeight">
                    <el-input-number v-model="form.additionalWeight" :min="0.1" :precision="1"
                        :step="0.1"></el-input-number>
                </el-form-item>
                <el-form-item label="续重价格(元)" prop="additionalPrice">
                    <el-input-number v-model="form.additionalPrice" :min="0" :precision="2"
                        :step="0.1"></el-input-number>
                </el-form-item>
                <el-form-item label="快递API ID" prop="expressApi">
                    <el-input v-model="form.expressApi"></el-input>
                </el-form-item>
                <el-form-item label="定位查询接口" prop="positionApi">
                    <el-input v-model="form.positionApi"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: 'FreightTemplate',
    data() {
        return {
            freightTemplates: [],
            dialogVisible: false,
            dialogTitle: '新增运费模板',
            formIndex: -1, //新增
            form: {
                name: '',
                firstWeight: 1,
                firstPrice: 12,
                additionalWeight: 1,
                additionalPrice: 2,
                expressApi: '',
                positionApi: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入快递名称', trigger: 'blur' }
                ],
                firstWeight: [
                    { required: true, message: '请输入首重', trigger: 'blur' }
                ],
                firstPrice: [
                    { required: true, message: '请输入首重价格', trigger: 'blur' }
                ],
                additionalWeight: [
                    { required: true, message: '请输入续重', trigger: 'blur' }
                ],
                additionalPrice: [
                    { required: true, message: '请输入续重价格', trigger: 'blur' }
                ],
                expressApi: [
                    { required: true, message: '请输入快递API ID', trigger: 'blur' }
                ],
                positionApi: [
                    { required: true, message: '请输入定位查询接口', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.loadFreightTemplates()
    },
    methods: {
        // 获取运费模板
        getFreightTemplate() {
            const storageKey = `freightTemplate`
            return JSON.parse(localStorage.getItem(storageKey))
        },

        // 存储运费模板
        setFreightTemplate(template) {
            const storageKey = `freightTemplate`
            localStorage.setItem(storageKey, JSON.stringify(template))
        },

        // 加载运费模板
        loadFreightTemplates() {
            const templates = this.getFreightTemplate()
            if (templates) {
                // 将对象转换为数组
                this.freightTemplates = Object.keys(templates).map(key => ({
                    ...templates[key],
                    name: key
                }))
            }
        },

        // 新增运费模板
        handleAdd() {
            this.dialogTitle = '新增运费模板'
            this.formIndex = -1
            this.form = {
                name: '',
                firstWeight: 1,
                firstPrice: 12,
                additionalWeight: 1,
                additionalPrice: 2,
                expressApi: '',
                positionApi: ''
            }
            this.dialogVisible = true
        },
        // 编辑运费模板
        handleEdit(row) {
            this.dialogTitle = '编辑运费模板'
            this.formIndex = this.freightTemplates.findIndex(item => item.name === row.name)
            this.form = { ...row }
            this.dialogVisible = true
        },
        // 删除运费模板
        handleDelete(index) {
            this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.freightTemplates.splice(index, 1)
                this.saveToCache()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        // 提交表单
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.formIndex !== -1) {
                        this.freightTemplates.splice(this.formIndex, 1)
                    }

                    this.freightTemplates.push({ ...this.form })

                    this.saveToCache()

                    this.dialogVisible = false
                    this.$message({
                        type: 'success',
                        message: this.formIndex === -1 ? '新增成功!' : '更新成功!'
                    })
                } else {
                    return false
                }
            })
        },
        // 保存到缓存
        saveToCache() {
            const templates = {}
            this.freightTemplates.forEach(item => {
                templates[item.name] = { ...item }
            })
            this.setFreightTemplate(templates)
        }

    }
}
</script>

<style scoped>
.freight-template-container {
    padding: 20px;
}

.operation-bar {
    margin-bottom: 20px;
}
</style>
